<!--  -->
<template>
  <div class="container grid">
    <div class="area1 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量巡检问题播报</div>
      <Area1 />
    </div>
    <div class="area2">
      <img class="containImg" src="@/assets/image/3d.jpeg" alt="" />
    </div>
    <div class="area3 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题责任单位分析</div>
      <Area3 />
    </div>
    <div class="area4 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题整改情况分析</div>
      <Area4 />
    </div>
    <div class="area5 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题区域分布分析</div>
      <Area5 />
    </div>
    <div class="area6 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题类型统计</div>
      <Area6 />
    </div>
    <div class="area7 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题趋势</div>
      <Area7 />
    </div>
    <div class="area8 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量问题隐患等级分析</div>
      <Area8 />
    </div>
  </div>
</template>

<script>
import Area1 from "./components/qualityArea1.vue";
import Area3 from "./components/qualityArea3.vue";
import Area4 from "./components/qualityArea4.vue";
import Area5 from "./components/qualityArea5.vue";
import Area6 from "./components/qualityArea6.vue";
import Area7 from "./components/qualityArea7.vue";
import Area8 from "./components/qualityArea8.vue";
export default {
  name: "index",
  data() {
    return {};
  },
  components: {
    Area1,
    Area3,
    Area4,
    Area5,
    Area6,
    Area7,
    Area8,
  },
};
</script>
<style >

.container {
  width: 100%;
  padding: 0 20px;
  height: 936px;
  box-sizing: border-box;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "area1 area2 area3"
    "area4 area2 area5"
    "area6 area7 area8";
  gap: 20px;
}
/*  */
.mainImg {
  height: calc(100% - 50px);
}
</style>